<script setup lang='ts'>
import { countStore } from '@/stores/counter';
import { defineStore } from 'pinia';
import { useRouter } from 'vue-router';

// const { count, cutCount, addCount } = countStore()//v3的仓库解构会失去喜爱响应式
const stores = countStore()

const router = useRouter()
</script>

<template>
    <div class="container">
        <h1>全局计数器</h1>
        <div class="counter">
            <button @click="stores.cutCount">-</button>
            <span>{{ stores.count }}</span>
            <button @click="stores.addCount">+</button>
        </div>
        <p>
            <button @click="router.push('/anothercounter')">去另外的测试页面</button>
        </p>
    </div>
</template>

<style scoped>
.counter {
    width: 100%;
    height: 250px;
    line-height: 250px;
    text-align: center;
}

.counter button,
.counter span {
    margin: 20px;
    width: 100px;
    height: 40px;
    font-size: 20px;
}
</style>